import React, { Component } from 'react'
import { Table, Tag, Space, Popconfirm, Button, Select, message } from 'antd';
import { getOrdersListApi, deleteOneOrderApi } from '../apis/ordersApi'

const { Option } = Select;

export default class OrderList extends Component {
    state = {
        list: [],
        loading: false,
        total: 1,
        current: 1,
        type: '',
    }
    componentDidMount() {
        this.getList();
    }
    //拿数据
    getList = async (params) => {
        try {
            this.setState({ loading: true })
            const data = await getOrdersListApi(params);
            // console.log("data", data);
            await this.setState({ loading: false, list: data.data, total: data.totalCount, current: data.pageNumber });
        } catch (error) {
            this.setState({ loading: false })
            console.log("err", error);
        }
    }

    //删除一个订单
    deleteHandler = async (id) => {
        // console.info(id)
        const data = await deleteOneOrderApi(id);
        if (data) {
            this.getList({ pageSize: 6, pageNumber: 1, conditions: { type: this.state.type } });
        }
        message.success('删除成功');
    }

    //分页
    onChange = (pageNumber, pageSize) => {
        this.getList({ pageSize: 6, pageNumber, conditions: { type: this.state.type } });
    }

    //订单分类查找
    handleChange = async (e) => {
        const type = e !== "all" ? e : ""
        // console.log("type", type)
        await this.setState({ type });
        this.getList({ pageSize: 6, pageNumber: 1, conditions: { type: type } })
    }

    //订单详情页
    goToOrderDetail = async (id) => {
        // console.log("id", id);
        //带参数的路由传参
        this.props.history.push("/main/orderDetail?id=" + id);
    }
    render() {
        const { list, loading, total, current } = this.state;
        const columns = [
            {
                title: '订单编号',
                dataIndex: '_id',
                key: "_id"
            },
            {
                title: '车辆名称',
                render: (item) => {
                    const car = item.carId || {};
                    const carName = `${car.brand.split(" ")[0]} ${car.number}`;
                    return <>
                        <span key={`${car._id}-car`}>
                            {carName}
                        </span>
                    </>
                }
            },
            {
                title: '用户',
                render: (item) => {
                    const user = item.userId || {};
                    return <>
                        <span key={`${user._id}-user`}>
                            {user.name}
                        </span>
                    </>
                }
            },
            {
                title: '车主',
                render: (item) => {
                    const owner = item.ownerId || {};
                    return <>
                        <span key={`${owner._id}-owner`}>
                            {owner.name}
                        </span>
                    </>
                }
            },
            {
                title: '下单时间',
                dataIndex: 'time',
                key: 'time'
            },
            {
                title: '订单状态',
                render: (item) => {
                    const { status } = item;
                    let state = "";
                    switch (status) {
                        case 'waitCheck': state = "求租中"; break;
                        case 'waitPay': state = "等待支付"; break;
                        case 'payed': state = "已支付"; break;
                        case 'reject': state = "交易失败"; break;
                        case 'return': state = "交易成功"; break;
                        case 'inactive': state = "已失效"; break;
                    }
                    return <>
                        <Tag color="green" key={`${item._id}-${item.status}`}>
                            {state}
                        </Tag>
                    </>

                }
            },
            {
                title: "操作",
                render: (item) => {
                    const flag = item.status === "return" || item.status === "inactive" || item.status === "reject";
                    return <>
                        <Popconfirm
                            title="您确定要删除吗?"
                            onConfirm={() => this.deleteHandler(item._id)}
                            okText="确定"
                            cancelText="取消"
                        >
                            <Button type="gost" disabled={!flag}>删除</Button>
                        </Popconfirm>

                        <Button type="primary" style={{ marginLeft: "18px" }} onClick={() => { this.goToOrderDetail(item._id) }}>详情</Button>


                    </>
                }
            },
        ];
        const pageination = {
            total, current, onChange: this.onChange,
            pageSize: 6
        }
        return (
            <div>
                <div style={{ marginBottom: '24px' }}>
                    <strong>按类型查找订单：</strong>
                    <Select defaultValue="all" style={{ width: 120 }} onChange={this.handleChange}>
                        <Option value="all">全部</Option>
                        <Option value="waitCheck">求租中</Option>
                        <Option value="waitPay">待支付</Option>
                        <Option value="payed">已支付</Option>
                        <Option value="reject">交易失败</Option>
                        <Option value="return">交易成功</Option>
                        <Option value="inactive">已失效</Option>
                    </Select>
                </div>

                <Table columns={columns} loading={loading}
                    pagination={pageination}
                    rowKey="_id"
                    dataSource={list} height="40px" />
            </div>
        )
    }
}
